<template>
  <div class="menu-component" id="menu">
    <div
      class="arrow"
      :style="{
        'margin-right': '5px',
        cursor: showLeftArrow ? 'pointer' : 'default',
        opacity: showLeftArrow ? '1' : '0.6',
      }"
      @click="scrollMenu('left')"
      v-show="showArrow"
    >
      <i class="iconfont zuoshuangjiantou"></i>
    </div>
    <div class="menu-scroll-wrapper" ref="menuContainer" @scroll="handleScroll">
      <el-menu
        :default-active="defaultActive"
        unique-opened
        text-color="#fff"
        class="menu-box"
        :collapse-transition="false"
        :mode="menuModel"
        @select="handleSelect"
        router
        active-text-color="#cfe9ff"
        menu-trigger="hover"
        :background-color="config.isWhiteTheme ? '#fff' : '#283046'"
      >
        <el-submenu
          v-for="item in menuList"
          :key="item.id"
          v-if="item.children.length > 0"
          :index="item.id + ''"
        >
          <template slot="title">
            <!-- <svg-icon
            :icon-file-name="item.src"
            style="margin-right: 8px; font-size: 22px; vertical-align: middle"
          /> -->
            <i :class="[item.icon, 'secondIcon2']"></i>
            <span slot="title" style="vertical-align: middle">{{
              item.name
            }}</span>
          </template>
          <!-- 二级 -->
          <el-menu-item
            v-for="list in item.children"
            :key="list.index"
            :route="list.url"
            :index="list.url"
            @click="handselect(list)"
          >
            <i class="iconfont xingzhuang-tuoyuanxing secondIcon"></i>
            <!-- :style="config.isWhiteTheme ?'color:#6E6B7B;':''" -->
            <span>{{ list.name }}</span>
          </el-menu-item>
        </el-submenu>
        <!-- 无子级 -->
        <el-menu-item :index="item.url" v-else @click="handselect(item)">
          <!-- <i :class="item.icon" style="margin-right: 5px; font-size: 16px"></i> -->
          <svg-icon
            :icon-file-name="item.src"
            style="margin-right: 8px; font-size: 22px; vertical-align: middle"
          />
          <span slot="title" style="vertical-align: middle">{{
            item.name
          }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div
      class="arrow"
      :style="{
        'margin-left': '5px',
        cursor: showRightArrow ? 'pointer' : 'default',
        opacity: showRightArrow ? '1' : '0.6',
      }"
      @click="scrollMenu('right')"
      v-show="showArrow"
    >
      <i class="iconfont youshuangjiantou"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "menus",
  data() {
    return {
      defaultActive: "",
      // bgColor: "#283046",
      isFold: false,
      logo: require("@assets/images/logo4.png"),
      collapseBtnClick: false,
      isFakeFold: false,
      i: 0,
      menuModel: "horizontal",
      // bgColor: "",
      menuList: [],

      showArrow: false,
      showLeftArrow: false,
      showRightArrow: true,
    };
  },
  watch: {
    // 监听主题切换
    isWhiteTheme(val) {
      // console.log(val);
      this.user.permissions.findIndex((item) => {
        // console.log(item);
        // 白色主题
        // if (val) {
        //   if (item.name == "系统首页") {
        //     item.src = "shouye1";
        //   } else if (item.name == "系统设置") {
        //     item.src = "xitong1";
        //   } else if (item.name == "建筑物管理") {
        //     item.src = "danwei1";
        //   } else if (item.name == "接警人") {
        //     item.src = "jiejingren1";
        //   } else if (item.name == "告警管理") {
        //     item.src = "liebiao1";
        //   } else if (item.name == "建筑物") {
        //     item.src = "jianzhu1";
        //   } else if (item.name == "防疫管理") {
        //     item.src = "fangyi1";
        //   } else if (item.name == "物联网设备") {
        //     item.src = "wulian1";
        //   } else if (item.name == "日志管理") {
        //     item.src = "rizhi1";
        //   } else if (item.name == "智能终端") {
        //     item.src = "zhineng1";
        //   } else if (item.name == "租户管理") {
        //     item.src = "zuhu1";
        //   } else if (item.name == "行政单位管理") {
        //     item.src = "xingzheng1";
        //   } else if (item.name == "消息通知") {
        //     item.src = "service1";
        //   } else if (item.name == "隐患处置") {
        //     item.src = "hiddenDanger1";
        //   } else if (item.name == "维保管理") {
        //     item.src = "maintenance";
        //   } else if (item.name == "规则引擎") {
        //     item.src = "rule1";
        //   } else if (item.name == "统计管理") {
        //     item.src = "tongji1";
        //   } else if (item.name == "产品接入") {
        //     item.src = "access1";
        //   } else if (item.name == "白云区烟感监管") {
        //     item.src = "baiyunArea1";
        //   } else if (item.name == "组织机构管理") {
        //     item.src = "enterprise1";
        //   } else if (item.name == "任务管理") {
        //     item.src = "task1";
        //   }else if (item.name == "订阅管理") {
        //     item.src = "dinyue1";
        //   }
        // } else {
        //   if (item.name == "系统首页") {
        //     item.src = "shouye";
        //   } else if (item.name == "系统设置") {
        //     item.src = "xitong";
        //   } else if (item.name == "建筑物管理") {
        //     item.src = "danwei";
        //   } else if (item.name == "接警人") {
        //     item.src = "jiejingren";
        //   } else if (item.name == "告警管理") {
        //     item.src = "liebiao";
        //   } else if (item.name == "建筑物") {
        //     item.src = "jianzhu";
        //   } else if (item.name == "防疫管理") {
        //     item.src = "fangyi";
        //   } else if (item.name == "物联网设备") {
        //     item.src = "wulian";
        //   } else if (item.name == "日志管理") {
        //     item.src = "rizhi";
        //   } else if (item.name == "智能终端") {
        //     item.src = "zhineng";
        //   } else if (item.name == "租户管理") {
        //     item.src = "zuhu";
        //   } else if (item.name == "行政单位管理") {
        //     item.src = "xingzheng";
        //   } else if (item.name == "消息通知") {
        //     item.src = "service";
        //   } else if (item.name == "隐患处置") {
        //     item.src = "hiddenDanger";
        //   } else if (item.name == "维保管理") {
        //     item.src = "maintenance1";
        //   } else if (item.name == "规则引擎") {
        //     item.src = "rule";
        //   } else if (item.name == "统计管理") {
        //     item.src = "tongji";
        //   } else if (item.name == "产品接入") {
        //     item.src = "access";
        //   } else if (item.name == "白云区烟感监管") {
        //     item.src = "baiyunArea";
        //   } else if (item.name == "组织机构管理") {
        //     item.src = "enterprise";
        //   } else if (item.name == "任务管理") {
        //     item.src = "task";
        //   }else if (item.name == "订阅管理") {
        //     item.src = "dinyue";
        //   }
        // }
      });

      this.$forceUpdate(); //这不会更新您拥有的任何计算属性,调用forceUpdate只会强制重新渲染视图
    },
    // 监听路由变化(网页回退时tag重现)
    $route(to) {
      let obj = {};
      // let hash = window.location.hash.split("#", 2)[1];
      // let hash = window.location.pathname.slice(6);
      let hash = window.location.pathname;
      let segments = hash.split("/"); // ["", "productType", "list", "index", "1503927023020938595"]
      // 菜单高亮选中逻辑
      if (hash == "/mountPointsDefine/list") {
        this.defaultActive = "/org/list"; //建筑物管理
      } else if (segments.slice(1, 4).join("/") === "productType/list/index") {
        this.defaultActive = "/device/product"; //产品
      } else if (segments.slice(1, 4).join("/") === "system/dictData/index") {
        this.defaultActive = "/system/dict"; //字典
      } else {
        this.defaultActive = to.path;
      }
      // 菜单
      this.user.permissions.findIndex((item) => {
        if (item.url == hash) {
          obj = item;
          return;
        } else if (item.children && item.children.length > 0) {
          item.children.findIndex((items) => {
            if (items.url == hash) {
              obj = items;
            }
          });
        }
      });
      // console.log(hash);
      if (hash == "/personal/list") {
        obj = {
          url: "/personal/list",
          name: "个人中心",
        };
      } else if (segments.slice(1, 4).join("/") === "productType/list/index") {
        obj = {
          url: hash,
          name: "产品详情",
        };
      } else if (segments.slice(1, 4).join("/") === "system/dictData/index") {
        obj = {
          url: hash,
          name: "字典数据",
        };
      } else if (hash == "/mountPointsDefine/list") {
        obj = {
          url: "/mountPointsDefine/list",
          name: "安装点详情",
        };
        this.defaultActive = "/org/list";
      }
      //  else if (hash == "/device/host") {
      //   obj = {
      //     url: "/device/host",
      //     name: "设备详情",
      //   };
      //   this.defaultActive = "/device/list";
      // }
      this.$store.commit("selectMenu", obj);
    },
  },
  mounted() {
    this.checkOverflow();
    window.addEventListener("resize", this.checkOverflow);
  },
  methods: {
    checkOverflow() {
      const container = this.$refs.menuContainer;
      if (!container) return;

      // 检测是否内容溢出
      const isOverflowing = container.scrollWidth > container.clientWidth;

      this.showArrow = isOverflowing;
    },
    handleScroll() {
      const container = this.$refs.menuContainer;

      // 检测滚动位置
      this.showLeftArrow = container.scrollLeft > 0;
      this.showRightArrow =
        container.scrollLeft < container.scrollWidth - container.clientWidth;
    },
    scrollMenu(direction) {
      const container = this.$refs.menuContainer;
      const scrollAmount = 200;

      container.scrollTo({
        left:
          direction === "left"
            ? container.scrollLeft - scrollAmount
            : container.scrollLeft + scrollAmount,
        behavior: "smooth",
      });
    },
    // 点击菜单
    handselect(list) {
      // console.log(this.user.permissions, "user.permissions");
      this.$store.commit("selectMenu", list);
    },
    // 菜单激活回调
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      // 白色主题
      if (this.isWhiteTheme) {
        if (key == "/home") {
          this.user.permissions.findIndex((item) => {
            if (item.name == "系统首页") {
              item.src = "shouye";
            }
          });
        } else {
          this.user.permissions.findIndex((item) => {
            if (item.name == "系统首页") {
              item.src = "shouye1";
            }
          });
        }
      }
    },
  },
  computed: {
    ...mapState(["config", "user"]),
    isWhiteTheme() {
      return this.config.isWhiteTheme;
    },
  },
  created() {
    // console.log(this.config.isFold);
    // console.log(this.user.permissions);
    // 一开始就获取当前路由路径(刷新还在)

    let menuList = [];
    menuList = JSON.parse(JSON.stringify(this.user.permissions));
    menuList = menuList.map((item) => {
      if (item.name === "物联网设备" && Array.isArray(item.children)) {
        item.children = item.children.filter(
          (citem) => citem.name !== "设备详情"
        );
      }
      return item;
    });
    this.menuList = menuList;

    this.defaultActive = window.location.pathname;
    let obj = {};
    let hash = window.location.pathname;
    // 菜单
    this.user.permissions.findIndex((item) => {
      // 白色主题
      // if (this.isWhiteTheme) {
      //   // console.log(123);
      //   if (item.name == "系统首页") {
      //     // 判断当前路由路径
      //     if (this.defaultActive == "/home") {
      //       item.src = "shouye";
      //     } else {
      //       item.src = "shouye1";
      //     }
      //   } else if (item.name == "系统设置") {
      //     item.src = "xitong1";
      //   } else if (item.name == "建筑物管理") {
      //     item.src = "danwei1";
      //   } else if (item.name == "接警人") {
      //     item.src = "jiejingren1";
      //   } else if (item.name == "告警管理") {
      //     item.src = "liebiao1";
      //   } else if (item.name == "建筑物") {
      //     item.src = "jianzhu1";
      //   } else if (item.name == "防疫管理") {
      //     item.src = "fangyi1";
      //   } else if (item.name == "物联网设备") {
      //     item.src = "wulian1";
      //   } else if (item.name == "日志管理") {
      //     item.src = "rizhi1";
      //   } else if (item.name == "智能终端") {
      //     item.src = "zhineng1";
      //   } else if (item.name == "租户管理") {
      //     item.src = "zuhu1";
      //   } else if (item.name == "行政单位管理") {
      //     item.src = "xingzheng1";
      //   } else if (item.name == "消息通知") {
      //     item.src = "service1";
      //   } else if (item.name == "隐患处置") {
      //     item.src = "hiddenDanger1";
      //   } else if (item.name == "维保管理") {
      //     item.src = "maintenance";
      //   } else if (item.name == "规则引擎") {
      //     item.src = "rule1";
      //   } else if (item.name == "统计管理") {
      //     item.src = "tongji1";
      //   } else if (item.name == "产品接入") {
      //     item.src = "access1";
      //   } else if (item.name == "白云区烟感监管") {
      //     item.src = "baiyunArea1";
      //   } else if (item.name == "组织机构管理") {
      //     item.src = "enterprise1";
      //   } else if (item.name == "任务管理") {
      //     item.src = "task1";
      //   }else if (item.name == "订阅管理") {
      //       item.src = "dinyue1";
      //     }
      // } else {
      //   if (item.name == "系统首页") {
      //     item.src = "shouye";
      //   } else if (item.name == "系统设置") {
      //     item.src = "xitong";
      //   } else if (item.name == "建筑物管理") {
      //     item.src = "danwei";
      //   } else if (item.name == "接警人") {
      //     item.src = "jiejingren";
      //   } else if (item.name == "告警管理") {
      //     item.src = "liebiao";
      //   } else if (item.name == "建筑物") {
      //     item.src = "jianzhu";
      //   } else if (item.name == "防疫管理") {
      //     item.src = "fangyi";
      //   } else if (item.name == "物联网设备") {
      //     item.src = "wulian";
      //   } else if (item.name == "日志管理") {
      //     item.src = "rizhi";
      //   } else if (item.name == "智能终端") {
      //     item.src = "zhineng";
      //   } else if (item.name == "租户管理") {
      //     item.src = "zuhu";
      //   } else if (item.name == "行政单位管理") {
      //     item.src = "xingzheng";
      //   } else if (item.name == "消息通知") {
      //     item.src = "service";
      //   } else if (item.name == "隐患处置") {
      //     item.src = "hiddenDanger";
      //   } else if (item.name == "维保管理") {
      //     item.src = "maintenance1";
      //   } else if (item.name == "规则引擎") {
      //     item.src = "rule";
      //   } else if (item.name == "统计管理") {
      //     item.src = "tongji";
      //   } else if (item.name == "产品接入") {
      //     item.src = "access";
      //   } else if (item.name == "白云区烟感监管") {
      //     item.src = "baiyunArea";
      //   } else if (item.name == "组织机构管理") {
      //     item.src = "enterprise";
      //   } else if (item.name == "任务管理") {
      //     item.src = "task";
      //   }else if (item.name == "订阅管理") {
      //       item.src = "dinyue";
      //     }
      // }

      if (item.url == hash) {
        obj = item;
        return;
      } else if (item.children && item.children.length > 0) {
        item.children.findIndex((items) => {
          if (items.url == hash) {
            obj = items;
          }
        });
      }
    });
    // console.log(hash);
    let segments = hash.split("/"); // ["", "productType", "list", "index", "1503927023020938595"]
    // console.log(segments.slice(1, 5).join('/'));
    // console.log(segments.slice(1, 4).join('/') === 'productType/list/index');
    if (hash == "/personal/list") {
      obj = {
        url: "/personal/list",
        name: "个人中心",
      };
    } else if (segments.slice(1, 4).join("/") === "productType/list/index") {
      obj = {
        url: hash,
        name: "产品详情",
      };
      this.defaultActive = "/device/product";
    } else if (segments.slice(1, 4).join("/") === "system/dictData/index") {
      obj = {
        url: hash,
        name: "字典数据",
      };
      this.defaultActive = "/system/dict";
    } else if (hash == "/mountPointsDefine/list") {
      obj = {
        url: "/mountPointsDefine/list",
        name: "安装点详情",
      };
      this.defaultActive = "/org/list";
    }
    this.$store.commit("selectMenu", obj);
  },
};
</script>

<style scoped lang="less">
.menu-component {
  height: 100%;
  width: 100%;
  transition: all 0.6s ease;
  display: flex;
  align-items: center;

  .aside-header {
    z-index: 10;
    height: 63px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    min-width: 200px;
    width: 14%;

    .aside-header_left {
      display: flex;
      width: 200px;
      align-items: center;

      .title {
        color: #7367f0;
        font-weight: 600;
        letter-spacing: 0.01rem;
        font-size: 1.45rem;
        padding-left: 16px;
      }
    }

    .aside-header_right {
      color: #7367f0 !important;
      font-size: 20px;
      cursor: pointer;
    }
  }

  .logo {
    width: 42px;
    height: 42px;
  }
}

.firstIcon {
  margin-right: 14px;
  color: @primaryThemeTxtColor !important;
  font-size: 20px;
}

.secondIcon {
  margin-right: 14px;
  // color: @primaryThemeTxtColor !important;
  font-size: 11px;
}

.secondIcon2 {
  color: @primaryThemeTxtColor;
  // font-size: 22px;
  margin-right: 5px !important;
  font-size: 18px;
}

.menu-box {
  box-sizing: border-box;
  min-width: 86%;
  display: flex;
  position: relative;
  white-space: nowrap;
  // overflow: hidden;
  // overflow-x: auto;
  // box-sizing: border-box;
}

.menu-box ::-webkit-scrollbar {
  display: none;
}

::v-deep .el-menu {
  border-right: none;
  height: calc(100% - 63px);
  // overflow: auto;
}

::v-deep .el-submenu.is-active .el-submenu__title {
  border-bottom: none;
  background-color: @primaryMenuItem2 !important;
  border-radius: 4px !important;
  color: @primaryMenuItem3 !important;
  // font-weight: 600;
}

::v-deep .el-submenu__icon-arrow {
  right: 14px;
}

::v-deep .el-menu.el-menu--horizontal {
  border-bottom: none;
  height: 42px;
  background: @primaryHeaderBgcolor !important;
}

::v-deep .el-menu-item {
  height: 42px;
  line-height: 42px;
  transition: padding 0.3s ease;
  color: @primaryThemeTxtColor !important;
  max-width: 230px;
  margin: 0 auto;
  border-bottom: none;
  background: @primaryHeaderBgcolor !important;
}

// 二级菜单
.el-menu--horizontal .el-menu .el-menu-item {
  transition: padding 0.3s ease;
  color: @primaryThemeTxtColor !important;

  &:hover {
    color: #909399;
    padding-left: 15px !important;
    background-color: transparent !important;
    transition: padding 0.3s ease;
  }
}

::v-deep .el-menu-item.is-active {
  box-shadow: 0 0 10px 1px ~"rgb(115 103 240 / 70%)";
  border-radius: 4px !important;
  border-bottom: none !important;
}

// 二级菜单选中样式
.el-menu--horizontal .el-menu-item.is-active {
  background: linear-gradient(
    118deg,
    #7367f0,
    rgba(115, 103, 240, 0.7)
  ) !important;
  color: #f6f6f6 !important;
}

::v-deep .el-submenu__title {
  height: 42px !important;
  line-height: 42px !important;
  transition: padding 0.3s ease;
  color: @primaryThemeTxtColor !important;
  background: @primaryHeaderBgcolor2 !important;
  max-width: 230px;
  margin: 0 2px;
  font-size: 15px;
}

::v-deep .el-menu--popup-bottom-start {
  margin-top: 5px;
  width: 150px !important;
  min-width: 150px !important;
  background: @primaryHeaderBgcolor !important;
  background: pink !important;

  &:hover {
    padding-left: 26px !important;
    background-color: rgba(0, 0, 0, 0) !important;
    transition: padding 0.3s ease;
  }
}

::v-deep .el-menu--popup {
  min-width: 150px !important;
  width: 150px !important;
  background: @primaryHeaderBgcolor !important;
}

::v-deep .el-menu--horizontal .el-menu .el-submenu__title {
  padding-left: 16%;
  background: @primaryHeaderBgcolor !important;
}

// /* 定义滚动条样式 */
// ::v-deep .menu-box::-webkit-scrollbar {
//   display: block; //显示滚动条
//   width: 0px; //定义滚动条宽度
//   height: 6px; //定义滚动条高度
//   border-radius: 10px; //定义滚动条圆角
//   margin-bottom: 10px;
//   bottom: 100px;
// }

// /*定义滚动条轨道 内阴影+圆角*/
// ::v-deep .menu-box::-webkit-scrollbar-track {
//   box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义轨道阴影
//   border-radius: 10px; //定义轨道圆角
//   background-color: transparent; //定义轨道颜色
// }

// /*定义滑块 内阴影+圆角*/
// ::v-deep .menu-box::-webkit-scrollbar-thumb {
//   border-radius: 10px; //定义滑块圆角
//   box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义滑块阴影
//   background-color: @primaryBgcolor12; //定义滑块颜色
// }

.arrow {
  color: #ddd;
  color: @primaryMenuItem3;
  font-size: 22px;
  cursor: pointer;
}

.menu-scroll-wrapper {
  position: relative;
  min-width: 86%;
  height: 44px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
}

::v-deep .menu-scroll-wrapper::-webkit-scrollbar {
  display: block; //显示滚动条
  width: 0px; //定义滚动条宽度
  height: 6px; //定义滚动条高度
  border-radius: 10px; //定义滚动条圆角
  // margin-bottom: 10px;
}

/*定义滚动条轨道 内阴影+圆角*/
::v-deep .menu-scroll-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义轨道阴影
  border-radius: 10px; //定义轨道圆角
  background-color: transparent; //定义轨道颜色
}

/*定义滑块 内阴影+圆角*/
::v-deep .menu-scroll-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px; //定义滑块圆角
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义滑块阴影
  background-color: @primaryBgcolor12; //定义滑块颜色
}
</style>
